<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            min-height: 100vh;
            display: grid; /* 网格 */
            justify-content: center;
            align-content: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            line-height:2;
            background-color: #ffc600;
            padding: 0;
            margin: 0;
        }
        .wrapper{
            width: 400px;
            height: 80vh;
            padding: 20px;
            border: 1px solid #000;
            background: white;
            display: grid;
            grid-template-rows: 1fr auto;
        }
        button.accept{
            background:#ff0060;
            color:white;
            font-size: 1rem;
            padding: 20px;
            transition: all 0.2s;
        }
        button.accept[disabled]{
            opacity:0.1;

        }
        .terms-and-condition{
            overflow: scroll;/* 超出滚动 */
            -webkit-overflow-scrolling:touch;
        }
    </style>
</head>
<body>
    <div class="wrapper"> <!-- 包裹器 -->
        <div class="terms-and-condition">
            <p>***同志恋爱声明</p>
            <p>
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
                专注清单：番茄钟&任务清单
            </p>
                <strong class="watch">
                    <p>提供APP内购买项目几点几分 大姐夫 发的
                        提供APP内购买项目几点几分 大姐夫 发的
                    </p>
                    <p>提供APP内购买项目几点几分 大姐夫 发的
                        提供APP内购买项目几点几分 大姐夫 发的
                    </p>
                    <p>提供APP内购买项目几点几分 大姐夫 发的
                        提供APP内购买项目几点几分 大姐夫 发的
                    </p>
                    <p>提供APP内购买项目几点几分 大姐夫 发的
                        提供APP内购买项目几点几分 大姐夫 发的
                    </p>
                    <p>提供APP内购买项目几点几分 大姐夫 发的
                        提供APP内购买项目几点几分 大姐夫 发的
                    </p>
                </strong>
        </div>
        <button class="accept" disabled>Accept</button>
    </div>
    <!-- <style>
        button.accept{
            background-color: red;
        }
        button{
            background-color: green;
        }
        .accept{
            padding: 20px;
            background-color: pink !important;
        }
    </style> -->
    <script>
        /* (function(){
            const oAcceptBtn=document.querySelector('.accept');
            setTimeout(()=>{
            oAcceptBtn.removeAttribute('disabled');
            } ,2000);
        })() */
        (function (){
            const terms=document.querySelector('.terms-and-condition'),
            watch=document.querySelector('.watch'),
            button=document.querySelector('.accept');

            function callback(payload){
                console.log(payload);
                if(payload[0].intersectionRatio==1){
                    button.removeAttribute('disabled')
                }
            }

            // 在视窗里是否已经出现了某个元素
            const ob=new IntersectionObserver(callback,{
                root:terms,
                threshold:1,
            });
            console.log(terms);
            ob.observe(terms.getElementsByTagName('p')[terms.getElementsByTagName('p').length-1]);
        })()
        
    </script>
</body>
</html>